<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/3/23
  Time: 11:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>培训管理</title>
    <link href="../css/homePage.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="../css/plug-time-css/jquery-ui.css"/>
    <link rel="stylesheet" id="skin" href="../css/plug-time-css/jquery-ui-1.9.2.custom.min17.css">
    <script type="text/javascript" src="../script/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="../script/jquery-ym-datePlugin-0.1.js"></script>
    <script type="text/javascript" src="../script/commonFunction.js"></script>
    <script type="text/javascript" src="../script/sectionList.js"></script>
    <style type="text/css">
        #main_body {
            background-image: url("../images/bg90.jpg");
        }

        #admin_menu_div {
            padding-left: 18%;
            overflow: hidden;
            margin-top: -20px;
            border-bottom: double 2px #bbc;
        }

        #admin_menu_div_ul {
            overflow: hidden;
        }

        #admin_menu_div_ul h4 {
            position: relative;
            float: left;
            margin-right: 10%;
            border-color: #ffd8d7;
        }

        #admin_main_div div {
            width: 700px;
            margin: 30px auto;
        }

        table thead th {
            width: 99px;
        }

        tbody td {
            text-align: center;
        }

        #train_table input {
            margin-top: 3px;
            margin-bottom: 3px;
        }

        .train_sub {
            margin-left: 36px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#admin_main_div").children().hide();

            tick();

            $("#employee_go_back").click(function () {
                window.location.href = "../admin/managePageJump";
            });

            $("#employee_leave").click(function () {
                switchoverColor(this, $("#leave_div"));
            });

            $("#employee_on_job").click(function () {
                switchoverColor(this, $("#on_job_div"));
            });

            $("#employee_all").click(function () {
                switchoverColor(this, $("#employee_all_div"));
            });

            //显示时间的选择
            $("#demoText4").ymdateplugin({
                showTimePanel: true
            });

            //换肤
            $("#skins").trigger("click");
            $("#skins").click(function () {
                $("#skins").trigger("change");
            });
            $("#skins").change(function () {
                if ($(this).val() > 0) {
                    $("#skin").attr("href", "../css/plug-time-css/jquery-ui-1.9.2.custom.min" + $(this).val() + ".css");
                } else {
                    $("#skin").attr("href", "");
                }
            });

        })
    </script>
</head>
<body id="main_body">
<div id="welcome">
    <c:if test="${manager != null}">
        欢迎${manager.name }登录&nbsp;&nbsp;&nbsp;<a href="../logout.action">退出</a>
    </c:if>
    <c:if test="${manager == null }">
        <%response.sendRedirect("../admin/login.jsp");%>
    </c:if>
    <span id="showTime">本地时间：<span id="localtime"></span></span>
</div>
<div id="admin_menu_div">
    <ul id="admin_menu_div_ul">
        <h4>
            <li id="employee_leave">查看</li>
        </h4>
        <h4>
            <li id="employee_on_job">添加</li>
        </h4>
        <h4>
            <li id="employee_go_back">返回</li>
        </h4>
        <h4>
            <li id="quit">退出</li>
        </h4>
    </ul>
</div>
<div id="admin_main_div">

    <div id="leave_div">
        <table cellpadding="0" cellspacing="0" border="1px" id="myTable">
            <thead>
            <tr>
                <th colspan="6">培训信息</th>
            </tr>
            <tr>
                <th>编号</th>
                <th>主题</th>
                <th>开始时间</th>
                <th>持续时间</th>
                <th>相关部门</th>
                <th>是否被查看</th>
            </tr>
            </thead>
            <tbody>
            <c:if test="${empty trains}">
                <tr>
                    <td colspan="6">还没有培训消息</td>
                </tr>
            </c:if>
            <c:if test="${not empty trains}">
                <c:forEach var="train" items="${trains}">
                    <tr>
                        <td>${train.id}</td>
                        <td>${train.details}</td>
                        <td>
                            <f:formatDate value="${train.startTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                        </td>
                        <td>${train.duration}</td>
                        <td>${train.section.section}</td>
                        <td>
                                ${train.looked == 1 ? "已查看" : "未查看"}
                        </td>
                    </tr>
                </c:forEach>
            </c:if>
            </tbody>
        </table>
    </div>

    <div id="on_job_div">
        <form method="post" action="../train/addTrain" id="train_form" style="margin: 10px 36%"
              onsubmit="return checkTrainForm()">
            <span>更换日历皮肤:</span>
            <select id="skins">
                <option value="0">无皮肤</option>
                <option value="1">高亮</option>
                <option value="2">黑暗</option>
                <option value="3">平滑</option>
                <option value="4">开始</option>
                <option value="5">微软</option>
                <option value="6">阳光</option>
                <option value="7">阴天</option>
                <option value="8">青蛙</option>
                <option value="9">轻盈</option>
                <option value="10">蜂箱</option>
                <option value="11">胡椒</option>
                <option value="12">茄子</option>
                <option value="13">库比蒂诺</option>
                <option value="14">南街</option>
                <option value="15">闪击</option>
                <option value="16">人类</option>
                <option value="17">hot sneaks</option>
                <option value="18">excite-bike</option>
                <option value="19">vader</option>
                <option value="20">dot-luv</option>
            </select>
            <table cellspacing="0" cellpadding="0" border="1px"
                   style="width: 299px; background-color: rgba(0,130,230,0.6)" id="train_table">
                <thead>
                <tr>
                    <th colspan="2">发布培训</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><label for="detail">培训主题：</label></td>
                    <td><input type="text" id="detail" name="details" placeholder="请输入培训主题"/></td>
                </tr>
                <tr>
                    <td><label for="demoText4">开始时间：</label></td>
                    <td><input type="text" name="startTime" id="demoText4" readonly="readonly" placeholder="请选择培训开始时间"/>
                    </td>
                </tr>
                <tr>
                    <td><label for="duration">持续时间：</label></td>
                    <td><input type="text" id="duration" name="duration" placeholder="请输入会议时长"
                               onchange="checkDuration(this)"></td>
                </tr>
                <tr>
                    <td><label for="section">相关部门：</label></td>
                    <td>
                        <select name="section.id" id="section">
                            <c:forEach items="${sections}" var="section">
                                <option value="${section.id}">${section.section}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr style="text-align: center">
                    <td colspan="2">
                        <input type="reset" value="取消" class="train_sub">
                        <input type="submit" value="确认" class="train_sub">
                    </td>
                </tr>
                </tfoot>
            </table>
        </form>
    </div>

</div>

</body>
</html>
